<!--
 * 配置管理
 * @author luguoxiang
 * @date 2023-03-27
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <table-container>
    <t-tabs theme="card" default-value="pc" @change="change">
      <t-tab-panel value="pc" label="PC端配置" :destroy-on-hide="false">
        <pc-config ref="pc" />
      </t-tab-panel>
      <t-tab-panel value="app" label="移动端配置" :destroy-on-hide="false">
        <app-config ref="app" />
      </t-tab-panel>
      <t-tab-panel value="login" label="登录设置" :destroy-on-hide="false">
        <login-config ref="login" />
      </t-tab-panel>
      <t-tab-panel value="other" label="其他" :destroy-on-hide="false">
        <other-config ref="other" />
      </t-tab-panel>
    </t-tabs>
    <div v-if="currKey !== 'other'" class="inner-btns">
      <t-button theme="primary" @click="submit">保存</t-button>
      <t-button theme="default" variant="base" @click="reset">重置</t-button>
    </div>
  </table-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TableContainer } from '@/components';
import PcConfig from './PcConfig.vue';
import AppConfig from './AppConfig.vue';
import LoginConfig from './LoginConfig.vue';
import OtherConfig from './OtherConfig.vue';

const pc = ref();
const app = ref();
const login = ref();
const forms = { pc, app, login };
let curr = null;
const currKey = ref();

function change(e) {
  curr = forms[e];
  currKey.value = e;
}
change('pc');

function submit() {
  curr.value.submit();
}

function reset() {
  curr.value.reset();
}
</script>
<style scoped lang="less">
.inner-btns {
  height: 60px;
  line-height: 60px;
}
:deep(.t-tabs) {
  height: calc(100% - 60px);
}
:deep(.t-tabs__content) {
  padding: var(--app-space);
  height: calc(100% - 48px);
}
:deep(.t-tab-panel) {
  height: 100%;
}
</style>
